<template>
  <div class="todoapp">
    <!-- 使用子组件 -->
    <todo-header :list="list" @addTask="addTaskHandler"></todo-header>
    <todo-main @delTask="delTaskHandler" :list="showList"></todo-main>
    <todo-footer 
    @clearAll="clearAllHandler"
    @changeTask="changeHandler" 
    :list="showList"></todo-footer>
  </div>
</template>

<script>
// 引入 子组件
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";

export default {
  // 注册
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem('list') || '[]'),
      isSel: ''
    };
  },
  methods: {
    addTaskHandler(taskName) {
      let id = this.list.length <= 0 ? 100 : this.list[this.list.length - 1].id + 1
      this.list.push({
        id,
        name: taskName,
        isDone: false
      })
    },
    delTaskHandler(id) {
      let index = this.list.findIndex(item => item.id === id)
      this.list.splice(index, 1)
    },
    changeHandler(isAll) {
      this.isSel = isAll
    },
    clearAllHandler() {
      this.list = this.list.filter(item => item.isDone === false)
    }
  },
  computed: {
    showList() {
      if(this.isSel === 'no') {
        return this.list.filter(item => !item.isDone)
      }else if (this.isSel === 'yes'){
        return this.list.filter(item => item.isDone)
      }else {
        return this.list
      }
    }
  },
  watch: {
    list: {
      deep: true,
      handler() {
        localStorage.setItem('list',JSON.stringify(this.list))
      }
    }
  }
};
</script>

<style>
</style>